<template>
  <div class="edu-page-warp">
    <el-card shadow="never">
      <section class="title-container">
        <div class="page-title">
          {{ typeTitle }}
        </div>
        <div>
          <el-button type="primary" v-if="exportShow" @click="exportData">{{$t('导出')}}</el-button>
          <el-button type="primary" v-if="maintainShow" @click="maintainClick">{{$t('维护')}}</el-button>
        </div>
      </section>
      <section class="title">
        {{ title }}
        <div v-if="foreword" style="color: #999;margin: 10px 0;">
          {{ foreword }}
        </div>
      </section>
      <!-- 维护 -->
      <section v-if="pageType === 'maintain'">
        <div v-if="data.length < 1" class="no-data">
          暂无数据
        </div>

        <div v-else>
          <div v-for="(item, index) in data" :key="index" class="question-item-container">
            <QPCheckbox @checkChange="checkChange" :rowData="item" class="question-item-title-container">
              <div class="question-title">
                <span>{{index+1}}. {{item.title}}</span>
                <span>
                  <template v-if="item.titleType === 1">
                    {{`【单选题】`}}
                  </template>
                  <template v-if="item.titleType === 2">
                    {{`【多选题】`}}
                  </template>
                  <template v-if="item.titleType === 3">
                    {{`【问答题】`}}
                  </template>
                </span>
                <span v-if="item.titleType === 1 && !ifProcess">
                  {{`（${item.weight}%）`}}
                </span>
              </div>
            </QPCheckbox>
            <!-- titleType: {1.单选 2.多选 3.问答} -->
            <div v-if="item.titleType === 1" class="question-row">
              <div v-for="(item1, index1) in item.options" :key="index1" class="option-item">
                <span v-if="ifProcess">
                  {{`${item1.option}.${item1.des}`}}
                </span>
                <span v-else>
                  {{`${item1.option}.${item1.des} (${item1.score})`}}
                </span>
              </div>
            </div>
            <div v-if="item.titleType === 2" class="question-row">
              <div v-for="(item1, index1) in item.options" :key="index1" class="option-item">
                <span>
                  {{`${item1.option}.${item1.des}`}}
                </span>
              </div>
            </div>
            <div v-if="item.titleType === 3" class="question-row">
              <el-input type="textarea" :rows="4" readonly></el-input>
            </div>
          </div>
        </div>
      </section>
      <!-- 预览 -->
      <section v-if="pageType === 'preview'">
        <div v-if="data.length < 1" class="no-data">
          暂无数据
        </div>
        <div v-else>
          <div v-for="(item, index) in data" :key="index" class="question-item-container">
            <div class="question-item-title-container">
              <div>
                <div class="question-title">
                  <div>{{index+1}}. {{item.title}}&nbsp;</div>
                  <div>
                    <template v-if="item.titleType === 1">
                      {{`【单选题】`}}
                    </template>
                    <template v-if="item.titleType === 2">
                      {{`【多选题】`}}
                    </template>
                    <template v-if="item.titleType === 3">
                      {{`【问答题】`}}
                    </template>
                  </div>
                  <div v-if="item.titleType === 1 && !ifProcess">
                    {{`（${item.weight}%）`}}
                  </div>
                </div>
              </div>
            </div>
            <!-- titleType: {1.单选 2.多选 3.问答} -->
            <div v-if="item.titleType === 1" class="question-row">
              <div v-for="(item1, index1) in item.options" :key="index1" class="option-item">
                <!-- {{item1}} -->
                <span v-if="ifProcess">
                  {{`${item1.option}.${item1.des}`}}
                </span>
                <span v-else>
                  {{`${item1.option}.${item1.des} (${item1.score})`}}
                </span>
              </div>
            </div>
            <div v-if="item.titleType === 2" class="question-row">
              <div v-for="(item1, index1) in item.options" :key="index1" class="option-item">
                <span>
                  {{`${item1.option}.${item1.des}`}}
                </span>
              </div>
            </div>
            <div v-if="item.titleType === 3" class="question-row">
              <el-input type="textarea" :rows="4" readonly></el-input>
            </div>
          </div>
        </div>
      </section>
      <edu-export-dialog :disabled="exportButton" :title="$t('message.prompt')" ref="downloadRef" :data="exportResult"></edu-export-dialog>
    </el-card>
  </div>
</template>
<script>
import QPCheckbox from './QPCheckbox'
import templateApi from 'common/src/api/teachingEvaluation/template'
import baseUrl from 'common/src/api/teachingEvaluation/env'
export default {
  name: 'QuestionsPreview',
  props: {
    typeTitle: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    pageType: {
      type: String,
      default: ''
    },
    maintainShow: {
      type: Boolean,
      default: true
    },
    exportShow: {
      type: Boolean,
      default: true
    },
    tmpComeIn: {
      type: Boolean,
      default: false
    },
    currentSelcetSortList: {
      type: Array,
      default: () => {
        return []
      }
    },
    foreword: {
      type: String,
      default: ''
    }
  },
  components: {
    QPCheckbox
  },
  watch: {
    'checkedQuestions': {
      handler: function(val, oldVal) {
        console.log('val', val)
        this.$emit('getChildSelect', val)
      },
      deep: true
    }
  },
  data() {
    return {
      checkedQuestions: [],
      exportButton: false,
      exportResult: null,
      ifProcess: false
    }
  },
  created() {
  },
  mounted() {
    if (this.$route.query.ifProcess == true) {
      this.ifProcess = true
    } else {
      this.ifProcess = false
    }
  },
  methods: {
    // 勾选值发生变化时
    checkChange(val) {
      // 如果true则直接push 为false则删除该项
      if (val.val) {
        this.checkedQuestions.push(val.sort)
      } else {
        this.checkedQuestions.forEach((item, index) => {
          if (item === val.sort) {
            this.checkedQuestions.splice(index, 1);
          }
        })
      }
    },
    // 导出
    exportData() {
      if (!this.tmpComeIn) {
        let param = {
          mainId: this.$route.query.id,
          name: this.$route.query.name
        }
        this.exportResult = null;
        this.$refs.downloadRef.open();
        this.exportButton = true;
        templateApi.exportTemplateData(param).then(res =>{
          if (res.code == 200) {
            let path = `${baseUrl}/template/downFile?path=${res.data}`
            // console.log('res', res)
            window.location.href = path;
            this.$message.success(this.$t('result.exportSuccessfully'));
            this.$refs.downloadRef.close();
          } else {
            this.$refs.downloadRef.close();
            this.exportButton = false;
          }
        })
      } else {
        let param = {
          mainId: this.$route.query.row.id,
          name: this.$route.query.row.name
        }
        this.exportResult = null;
        this.$refs.downloadRef.open();
        this.exportButton = true;
        templateApi.exportTemplateData(param).then(res =>{
          if (res.code == 200) {
            let path = `${baseUrl}/template/downFile?path=${res.data}`
            // console.log('res', res)
            window.location.href = path;
            this.$message.success(this.$t('result.exportSuccessfully'));
            this.$refs.downloadRef.close();
          } else {
            this.$refs.downloadRef.close();
            this.exportButton = false;
          }
        })
      }
    },
    // 维护点击事件
    maintainClick() {
      this.$emit('goToMaintain')
    }
  }
}
</script>
<style lang="scss" scoped>
.title-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .page-title {
    font-size: 18px;
    font-weight: bold;
  }
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}
.question-item-container {
  // display: flex
  margin-bottom: 30px;
  .question-item-title-container {
    display: flex;
    margin-bottom: 10px;
    .question-title {
      display: flex;
      align-items: middle;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .question-row {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    padding: 0 30px;
    .option-item {
      width: 20%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
.no-data {
  text-align: center;
}
</style>
